<div class="space"><a name="top"></a></div>
<div id="column_left" class="clearfix">
	<div class="content"> 
		<link href="hinh-anh_files/jquery.css" media="all" type="text/css" rel="stylesheet">
		<link href="hinh-anh_files/jquery.css" media="all" type="text/css" rel="stylesheet">
		<script type="text/javascript" src="hinh-anh_files/jquery_003.js"></script>
		<script type="text/javascript" src="hinh-anh_files/jquery_002.js"></script>
		<script type="text/javascript">
			$(function() 
			{
				$('a.zoom').fancybox({ 'hideOnContentClick': true,'overlayShow' : false,
					 'zoomSpeedIn' : 600,
					 'zoomSpeedOut' : 500,
					 'easingIn' : 'easeOutBack',
					 'easingOut' : 'easeInBack' ,
					 'imageScale':true
				}); 
			});
			
		</script>
		<style type="text/css">
			*, body{
				padding:0;
				margin:0;
			}
			a img{
				border:none;
			}
			/*Start here*/
			#div140 a{
				display:block;
				position:relative;
				height:160px;
				width:140px;
				float:left;
				margin:3px 5px 15px 6px;
			}
			#div140 a span{
				position:absolute;
				height:160px;
				width:140px;
				top:0;
				left:0;
			}
			#div80 a{
				display:block;
				position:relative;
				height:120px;
				width:80px;
				float:left;
				margin:3px 5px 5px 6px;
			}
			#div80 a span{
				position:absolute;
				height:120px;
				width:80px;
				top:0;
				left:0;
			}

			/*
			 * CSS only technique
			 * 
			#div1 a img{
				display:inline;
			}
			#div1 a span img{
				display:none;
			}
			#div1 a:hover img{
				display:none;
			}
			#div1 a:hover span img{
				display:inline;
			}
			*/
		</style>
		<script type="text/javascript">
			$(document).ready(function(){
				$('#div140 a').hover(function(){
					$('span img',$(this)).fadeOut();
					$('>img',$(this)).fadeIn();//Khong co cung ko sao
				},function(){
					$('span img',$(this)).fadeIn();
					$('>img',$(this)).fadeOut();//Neu bo phia tren thi bo luon o day
				})
			});
			$(document).ready(function(){
				$('#div80 a').hover(function(){
					$('span img',$(this)).fadeOut();
					$('>img',$(this)).fadeIn();//Khong co cung ko sao
				},function(){
					$('span img',$(this)).fadeIn();
					$('>img',$(this)).fadeOut();//Neu bo phia tren thi bo luon o day
				})
			});
		</script>
		<div class="breadcrumb clearfix_1">
			<ul>
				<li><a href="http://www.hongocha.vn/alphacms/vn/hinh-anh">Thư viện ảnh</a>
					<ul style="width: 161px;">
						<li style="width: 160px; float: left;"><a href="http://www.hongocha.vn/alphacms/vn/hinh-anh/catalog/1">Studio</a></li>
						<li style="width: 160px; float: left;"><a href="http://www.hongocha.vn/alphacms/vn/hinh-anh/catalog/2">Magazine</a></li>
						<li style="width: 160px; float: left;"><a href="http://www.hongocha.vn/alphacms/vn/hinh-anh/catalog/3">Ngoại Cảnh</a></li>
						<li style="width: 160px; float: left;"><a href="http://www.hongocha.vn/alphacms/vn/hinh-anh/catalog/4">Hậu Trường</a></li>
						<li style="width: 160px; float: left;"><a href="http://www.hongocha.vn/alphacms/vn/hinh-anh/catalog/5">Album</a></li>
						<li style="width: 160px; float: left;"><a href="http://www.hongocha.vn/alphacms/vn/hinh-anh/catalog/6">Sân Khấu</a></li>
					</ul>
				</li>
			</ul>
		</div>
		<div class="line clearfix"></div>
		<?php 
		foreach($result as $value):?>
		<div id="div140">
			<a href="<?=base_url().'hinh-anh/catalog/'.$value['id']?>">
				<img style="display: none;" src="<?=base_url().IMAGE_THUMB_DIR.'/'.$value['name']?>" alt="<?=$value['name']?>">
				<span class="hoverblack">
					<img style="display: inline;" src="<?=base_url().IMAGE_THUMB_DIR.'/'.$value['name']?>" alt="<?=$value['name']?>">
				</span>
			</a>
		</div>
		<?php endforeach;?>
		<div class="line_none clearfix"></div>
		<?=$this->pagination->create_links()?>
		<div class="line_dot clearfix" style="margin-top:36px;"></div>
	</div>
</div>